<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <title>欢迎登录后台管理系统</title>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>

  <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  <!--<script language="JavaScript" src="js/jquery.js"></script>-->
  <script src="js/cloud.js" type="text/javascript"></script>
  <script src="./bootstrap/js/bootstrap.js" type="text/javascript"></script>


  <script language="javascript">
    $(function () {
      $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
      $(window).resize(function () {
        $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
      })
    });

    //商家注册提交错点击的时候执行的函数，来判断商家填账号和密码了没有
    function subReg() {
      let account = document.getElementById('inputAccount').value;
      let password = document.getElementById('inputPassword').value;
      let repassword = document.getElementById('inputPasswordConf').value;

      if (account == '' || password == '' || repassword == '') {
        document.getElementById("tipmessReg").innerHTML = '请填写完整';
        alert('账号或者密码为空');
        //返回的意思是运行到下一行就暂定，不要再继续，为什么不能继续？因为这里是判断已经为空，需要让用户再次填写

      } else {
        if (password != repassword) {

          document.getElementById("tipmessReg").innerHTML = '两次密码不一致';

        } else {
          //账号和密码都一致，判断账号是否已经存在
          //获取账号
          let account = document.getElementById('inputAccount').value;
          //发送ajax请求
          let obj = {account: account, passwd: password};
          $.ajax({
            url: 'consumer/add',//后台商家注册的地址
            type: 'post',//后台接口的请求方式
            data: JSON.stringify(obj),//JSON对象 转JSON字符串
            dataType: 'json',//后端给前端返回的数据格式
            contentType: 'application/json',//前端给后端的返回数据格式
            success: function (data) {
              if (data.code == 200) {
                //注册成功可以登录
                document.getElementById("tipmessReg").innerHTML = "注册成功，请登录";

              } else {
                //账号已经存在，不能注册，返回
                document.getElementById("tipmessReg").innerHTML = "账号已经存在，请重新注册";

              }

            }
          })
        }
      }

    }

    function subLogin() {
      let account = document.getElementById('inputAccountLogin').value;
      let password = document.getElementById('inputPasswordLogin').value;
      if (account == '' || password == '') {
        document.getElementById("tipmessLogin").innerHTML = '账号或密码请填写完整';

      } else {
        let obj = {account: account, passwd: password};
        $.ajax({
          url: 'consumer/login',//后台商家注册地址
          type: 'post',//后台接口的请求方式
          data: JSON.stringify(obj),//JSON对象转JSON字符串
          dataType: 'json',//后端给前端返回的数据格式
          contentType: 'application/json',//前端给后端的返回数据格式
          success: function (data) {
            if (data.code == 200) {
              //登录成功，界面跳转到系统内部
              window.location.href = 'consumer.html#?refresh=' + new Date().getTime();

            } else {
              document.getElementById("tipmessLogin").innerHTML = "账号密码不正确,请核实...";


            }
          }


        })
      }


    }

  </script>


  <style>

    .block-content {
      display: flex;
      flex-wrap: wrap;
    }

    .goods-list {
      width: 25%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .goods-block {
      width: 260px;
      padding: 0 30px;
    }

    .goods-img {
      width: 200px;
      height: 200px;
    }

    .foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .add-card {
      width: 30px;
      height: 30px;
    }

    .mt20 {
      margin-top: 20px;
    }
  </style>
</head>
<body>
<!--消费者页面的顶部导航-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">简单商城</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" data-toggle="modal" data-target="#consumerRegisterModal">注册</a></li>
        <li><a href="#" data-toggle="modal" data-target="#consumerLoginModal">登录</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">退出系统 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="login.html">安全退出</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="block-content">
  <div class="goods-list">
    <div class="goods-block">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.71hKxp71VumQ98ZBrI-35gHaHa?w=185&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7"
           alt="" class="goods-img">
      <div class="foot mt20">
        <div class="goods-name">nike</div>
        <img src="./images/cart.png"
             alt="" class="add-card">
      </div>
      <div class="foot mt20">
        <div class="new-price">30.60元</div>
        <div class="old-price">50.00元</div>
      </div>
    </div>
  </div>

  <div class="goods-list">
    <div class="goods-block">
      <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.8GvM7DUaSmRBOtapJx-YiwHaHa?w=202&h=202&c=7&r=0&o=5&dpr=1.3&pid=1.7"
           alt="" class="goods-img">
      <div class="foot mt20">
        <div class="goods-name">小白鞋</div>
        <img src="./images/cart.png"
             alt="" class="add-card">
      </div>
      <div class="foot mt20">
        <div class="new-price">30.60元</div>
        <div class="old-price">50.00元</div>
      </div>
    </div>
  </div>

  <div class="goods-list">
    <div class="goods-block">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.JjeSA1Pg3Ds3EHLRtkK2YgHaHa?w=202&h=202&c=7&r=0&o=5&dpr=1.3&pid=1.7"
           alt="" class="goods-img">
      <div class="foot mt20">
        <div class="goods-name">篮球鞋</div>
        <img src="./images/cart.png"
             alt="" class="add-card">
      </div>
      <div class="foot mt20">
        <div class="new-price">30.60元</div>
        <div class="old-price">50.00元</div>
      </div>
    </div>
  </div>

  <div class="goods-list">
    <div class="goods-block">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.17a4FDgmADPpvTfUn9jX0AHaHa?w=202&h=201&c=7&r=0&o=5&dpr=1.3&pid=1.7"
           alt="" class="goods-img">
      <div class="foot mt20">
        <div class="goods-name">李宁</div>
        <img src="./images/cart.png"
             alt="" class="add-card">
      </div>
      <div class="foot mt20">
        <div class="new-price">30.60元</div>
        <div class="old-price">50.00元</div>
      </div>
    </div>
  </div>

  <div class="goods-list">
    <div class="goods-block">
      <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CFuW3vJVy33nePflofmJTAHaHa?w=197&h=197&c=7&r=0&o=5&dpr=1.3&pid=1.7"
           alt="" class="goods-img">
      <div class="foot mt20">
        <div class="goods-name">匹克</div>
        <img src="./images/cart.png"
             alt="" class="add-card">
      </div>
      <div class="foot mt20">
        <div class="new-price">30.60元</div>
        <div class="old-price">50.00元</div>
      </div>
    </div>
  </div>
</div>


<!--消费者注册模态框 -->
<div aria-labelledby="myModalLabelReg" class="modal fade" id="consumerRegisterModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabelReg">用户注册</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputAccount">账号</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputAccount" placeholder="请输入登陆账号" type="text">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputPassword">密码</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputPassword" placeholder="请输入密码" type="password">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputPasswordConf">确认密码</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputPasswordConf" placeholder="请确认密码"
                     type="password">
            </div>
          </div>
          <span id="tipmessReg" style="color: red"></span>
        </form>
      </div>
      <div class="modal-footer">

        <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
        <button class="btn btn-success" onclick="subReg()" type="button">注册</button>
        <!--          <button class="btn btn-primary" onclick="subReg()" type="button">注册</button>-->
      </div>
    </div>
  </div>
</div>

<!--消费者登录的模态框 -->
<div aria-labelledby="myModalLabelLogin" class="modal fade" id="consumerLoginModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span
                aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabelLogin">用户登录</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputAccountLogin">账号</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputAccountLogin" placeholder="请输入登陆账号" type="text">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="inputPassword">密码</label>
            <div class="col-sm-10">
              <input class="form-control" id="inputPasswordLogin" placeholder="请输入密码" type="password">
            </div>
          </div>
          <span id="tipmessLogin" style="color: red"></span>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
        <button class="btn btn-success" onclick="subLogin()" type="button">登录</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>